<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-03 21:46:21
 * @LastEditTime: 2019-10-06 15:11:52
 * @LastEditors: Please set LastEditors
 -->
<template>
  <!-- <div class="hover">1</div> -->
  <Row class="mo-hover">
    <Col :lg="{span:16,offset:4}" class="hover-col">
      <h1>寮内最强</h1>
      <div class="honer-people">
        <div class="honer-people-box" style="top:20px">
          <div class="box-img"></div>
          <div class="box-context">
            <p>ID:青涟</p>
            <p>简介:阴阳师巨佬</p>
            <p>人气值：无限</p>
          </div>
        </div>
        <div class="honer-people-box" style="top:-20px">
          <Tooltip content="点击可持续增加人气哦！" placement="top">
            <div class="box-img"></div>
          </Tooltip>
          <div class="box-context">
            <p>ID:青涟</p>
            <p>简介:阴阳师巨佬</p>
            <p>人气值:9999999999</p>
          </div>
        </div>
        <div class="honer-people-box" style="top:20px">
          <div class="box-img"></div>
          <div class="box-context">
            <p>ID:青涟</p>
            <p>简介:阴阳师巨佬</p>
            <p>人气值：无限</p>
          </div>
        </div>
      </div>
    </Col>
  </Row>
</template>
<script>
export default {
  name: "moHover",
  data() {
    return {};
  }
};
</script>
<style lang="scss" scoped>
.mo-hover {
  width: 100%;
  height: 1000px;
  //   background-color: white;
  .hover-col {
    height: 100%;
    background-color: white;
    h1 {
      padding-top: 20px;
      padding-bottom: 20px;
    }
    .honer-people {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      height: 230px;
      width: 100%;
      .honer-people-box {
        position: relative;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 150px;
        height: 180px;
        .box-img {
          width: 100px;
          height: 100px;
          background-image: url("../../../assets/img/qinlian.jpg");
          background-size: 100%;
          border-radius: 100px;
          cursor: pointer;
          margin-bottom: 10px;
          //   &:hover{
          //       filter: blur(2px)
          //   }
        }
        p {
          height: 20px;
        }
      }
    }
  }
}
</style>